<template>
  <div class="ie-timeline">
    <a-timeline
      direction="horizontal"
      mode="top"
    >
      <a-timeline-item line-color="#FFF" dot-color="#FFF"></a-timeline-item>

      <a-timeline-item
        v-for="(step, $index) in stepsValue"
        :label="format(step?.time)"
        :line-color="step && '#165dff'"
        :key="$index"
      >
        <div class="ie-timeline--content">
          <div
            :class="['ie-timeline--h', {
              disabled: !step
            }]"
          >{{ step.txt }}</div>
          <a-space v-if="step && step['username']">
            <icon-user
              :style="{
                fontSize: '14px',
                color: 'var(--color-primary-light-4)',
              }"
            />
            <span>{{ step['username'] }}</span>
          </a-space>
        </div>

        <template v-if="step" #dot>
          <a-spin v-if="step['status'] === 0" :size="18" />
          <icon-close
            v-if="step['status'] === 1"
            :style="{
              color: 'rgb(var(--red-6))',
              fontSize: '18px',
              padding: '2px',
              boxSizing: 'border-box',
              borderRadius: '50%',
              backgroundColor: 'rgb(var(--red-1))',
            }"
          />
          <icon-check
            v-if="step['status'] === 2"
            :style="{
              fontSize: '18px',
              padding: '2px',
              boxSizing: 'border-box',
              borderRadius: '50%',
              backgroundColor: 'var(--color-primary-light-1)',
            }"
          />
        </template>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script setup>
import { IconCheck, IconClose, IconUser } from '@arco-design/web-vue/es/icon'
import { format } from '/@/utils/helper'

const props = defineProps({
  stepsValue: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="less">
.ie-timeline {
  padding-top: 24px;

  .arco-timeline-item-content > div,
  .arco-timeline-item-label {
    display: inline-block;
    margin-left: 6px;
    transform: translateX(-50%);
  }

  &-content {
    text-align: center;
  }

  &--h {
    font-size: 14px;
    color: #33353C;

    &.disabled {
      color: #C4C4C4;
    }
  }

  .arco-space {

    span {
      font-size: 12px;
      color: #33353C;
    }
  }
}
</style>